<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>支付页面</title>
    <link rel="stylesheet" href="../plugins/element-ui/index.css">
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/element-ui/index.js"></script>
    <script src="../plugins/axios/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 20px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .cart-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #fafafa;
        }

        .cart-info {
            display: flex;
            align-items: center;
        }

        .cart-info img {
            margin-right: 10px;
            border-radius: 5px;
        }

        .cart-info h3 {
            margin: 0;
        }

        .cart-quantity {
            display: flex;
            align-items: center;
        }

        .cart-quantity span {
            margin: 0 10px;
            font-size: 16px;
        }

        .user-info {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
<h1 style="text-align: center; margin-top: 20px;">支付页面</h1>

<div id="app" class="container">
    <h2>我的信息</h2>
    <div class="user-info" v-if="userInfo">
        <p>电话: {{ userInfo.phone }}</p>
        <p>地址: {{ userInfo.email }}</p>
    </div>

    <h2>购物车</h2>
    <div v-for="item in shopingCar" :key="item.id" class="cart-item">
        <div class="cart-info">
            <img :src="item.image" alt="item.name" width="100">
            <h3>{{ item.name }}</h3>
        </div>
        <div class="cart-quantity">
            <span>数量: {{ item.num }}</span>
        </div>
    </div>
    <button @click="redirectToPayup" style="margin-top: 550px;position: fixed; bottom: 20px; right: 40%; transform: translateX(50%); background-color: #e0f7fa; border-radius: 15px; padding: 10px 20px; font-size: 18px;">去结账</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            shopingCar: [],
            userInfo: null
        },
        mounted() {
            this.fetchShopingCar();
            this.fetchUserInfo();
        },
        methods: {
            fetchShopingCar() {
                axios.get('/categories/getShopingCar')
                    .then(response => {
                        console.log('Shoping car:', response.data);
                        this.shopingCar = response.data.map(item => ({
                            ...item,
                            num: item.num // Ensure num is set
                        }));
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            fetchUserInfo() {
                axios.get('/user/select')
                    .then(response => {
                        console.log('User info:', response.data);
                        this.userInfo = response.data;
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            redirectToPayup() {
                const payload = {
                    userInfo: this.userInfo,
                    shopingCar: this.shopingCar
                };
                axios.post('/pay/buy', payload)
                    .then(response => {
                        window.location.href = 'pay-success.html';
                    })
                    .catch(error => {
                        console.error(error);
                    });
            }
        }
    });
</script>
</body>
</html>